<template>
  <div style="position: relative;background:#fff;" class="centerProduct">
    <div style="height:50px;"></div>
    <div class="H2title" :class="isshow ? 'move' : ''" ref="pronbitProduct">
      <h2 :style="$store.getters.screenWidth ? 'font-size:28px': ''">产品</h2>
    </div>
    <div>
      <div
        style="font-size:16px;font-weight:300;margin-top:30px"
        :style="$store.getters.screenWidth ? 'font-size:14px': ''"
      >PRODUCTS</div>
      <div style="padding:30px 10px 0;display:flex;justify-content:center;width:100%;overflow:auto">
        <el-menu
          default-active="-1"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          style="display: flex;width:100%"
          :style="$store.getters.screenWidth ? '': 'justify-content: center'"
        >
          <el-menu-item
            style="height:35px;line-height:35px;font-size:16px;font-weight:300;z-index:99"
            :index="item.id.toString()"
            v-for="item in catefgoryList"
            :key="item.id"
          >{{item.cateName}}</el-menu-item>
        </el-menu>
      </div>
      <div class="center_product_list" :style="$store.getters.screenWidth ? '': 'justify-content: flex-start;'">
        <productItem
          badcolor="#fefefe"
          :itemobj="item"
          v-for="(item,index) in productlist"
          :key="index"
          style="background:#fff"
        />
      </div>

      <div class="index_from_bottom" style="  background-color: #fff;
">
        <div
          class="index_from_bottom_item"
          v-for="(item,index) in bottom_list"
          :key="index"
          :class="isshow ? 'movebottom' : ''"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import productItem from "./productItem";
import { productcateglory, productFind } from "../api/api";
export default {
  name: "CenterTitle",
  props: {
    msg: String
  },
  data() {
    return {
      isshow: true,
      bottom_list: [1, 2, 3, 4],
      tabPosition: "left",
      catefgoryList: [],
      productlist: [],
      activeIndex: 0
    };
  },
  components: {
    productItem
  },
  mounted() {
    window.addEventListener("scroll", this.handleScrollx, true);
    this.getproductcateglory();
    this.getproductFind(0);
  },
  methods: {
    async getproductcateglory() {
      let res = await productcateglory({
        pageNo: 0,
        pageSize: 0,
        pageType: "A"
      });
      this.catefgoryList = res.data.data;
      this.catefgoryList.unshift({
        cateName: "全部",
        id: "-1"
      });

    },
    async getproductFind(val, cate) {
      let res = await productFind({
        pageNo: val,
        pageSize: 10,
        cateIds: cate,
        pageType: "A"
      });
      this.productlist = res.data.data;
      this.productlist = this.productlist.splice(0, 8);
      this.total = res.totalPage;
    },
    handleSelect(index) {
      if (index == -1) {
        this.getproductFind(0, []);
        return;
      }
      let array = [];
      array.push(index);
      this.getproductFind(0, array);
    },
    handleScrollx() {
      let llheight = document.body.clientHeight; //视窗高度
      if (this.$refs.pronbitProduct) {
        let topheight = this.$refs.pronbitProduct.getBoundingClientRect().top;
        if (llheight - topheight > 20) {
          this.isshow = true;
        } else {
          this.isshow = false;
        }
      }
    }
  }
};
</script>
<style lang="scss">
.centerProduct {
  .el-menu--horizontal > .el-menu-item.is-active {
    background: rgb(64, 158, 255) !important;
    color: rgb(255, 255, 255) !important;
    font-size: 16px;
    border-radius: 5px;
  }
}
</style>
<style lang="scss" scoped>
.H2title {
  width: 100%;
  margin-top: 60px;
  position: absolute;
  top: -150px;
  opacity:0;
}
.H2title h2 {
  font-size: 36px;
  font-weight: 300;
}
.move {
  animation: rotatep 1s linear 0.2s;
  animation-fill-mode: forwards;
}
.el-menu-demo{
  // justify-content: space-between;
}
@keyframes rotatep {
  0% {
    top: -80px;
    opacity: 0;
  }
  100% {
    top: -40px;
    opacity: 1;
  }
}
@keyframes rotatebottom {
  0% {
    transform: translate(0px, 50px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0px);
    opacity: 1;
  }
}
.movebottom {
  animation: rotatebottom 1s linear 0.2s;
}
.index_from_bottom {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 40px 10px;
  .index_from_bottom_item {
    padding-top: 10px;
  }
}
.center_product_list {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding: 0 10px;
  
}
</style>
